<template>
  <div class="order_table">
    <el-table class="outer_order_table" :data="orderState.orderList" :border="parentBorder" height="100%"
      style="width: 100%" v-loading="orderState.orderLoading" :row-class-name="getrowclassname">
      <el-table-column label="平台订单号" width="180">
        <template #default="scope">
          <div class="text1 DINAlternate">{{ scope.row.bet_id }}</div>
        </template>
      </el-table-column>
      <el-table-column label="账号" prop="name" width="120">
        <template #default="scope">
          <div class="text1 DINAlternate">{{ scope.row.user_name }}</div>
        </template>
      </el-table-column>
      <el-table-column label="平台" prop="name" width="120">
        <template #default="scope">
          <div class="text1 DINAlternate">{{ bctypes[scope.row.bc_type] }}</div>
        </template>
      </el-table-column>
      <el-table-column label="下单时间" prop="name" width="120">
        <template #default="scope">
          <div class="text1 DINAlternate">{{ scope.row.place_date }}</div>
        </template>
      </el-table-column>
      <el-table-column label="玩法" prop="name" width="70">
        <template #default="scope">
          <div class="text2 AlibabaPuHuiTi_2_85_">
            {{ scope.row.sport_type == 'soccer' ? '足球' : '篮球' }}
          </div>
        </template>
      </el-table-column>
      <el-table-column label="联赛" prop="name" align="left">
        <template #default="scope">
          <div class="flex_column">
            <div class="text1 DINAlternate">{{ scope.row.league_name }}</div>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="赛事" prop="name">
        <template #default="scope">
          <div class="flex_column">
            <div class="text3 AlibabaPuHuiTi_2_85_">{{ scope.row.home_name }} vs {{ scope.row.away_name }}
            </div>
            <div class="text4 AlibabaPuHuiTi_2_55_">{{ scope.row.match_time != '' ? scope.row.match_time : '--' }} 
            </div>
          </div>
        </template>
      </el-table-column>
      
      <el-table-column label="盘口" prop="name" width="160">
        <template #default="scope">
          <div class="text2 AlibabaPuHuiTi_2_55_">{{ scope.row.pk_odds_key_ch }}</div>
          <!-- <div class="text2">{{ scope.row.pk_odds_key_ch }}</div> -->
        </template>
      </el-table-column>
      <!-- <el-table-column label="状态" prop="name" width="100">
        <template #default="scope">
          <div class="flex">
            <img v-if="scope.row.run_status == 1" src="@/assets/home/clock.png" style="width: 16px; height: 16px"
              alt="" />
            <img v-if="scope.row.run_status == 2" src="@/assets/home/done.png" style="width: 16px; height: 16px"
              alt="" />
            <img v-if="scope.row.run_status == 3" src="@/assets/home/cancelled.png" style="width: 16px; height: 16px"
              alt="" />
            <div style="margin-left: 4px" :style="runstatusStyle(scope.row.run_status)">
              {{ runstatusMap[scope.row.run_status] }}
            </div>
          </div>
        </template>
      </el-table-column> -->
      <el-table-column label="赔率" prop="name" width="90">
        <template #default="scope">
          <div class="text1">{{ scope.row.odd }}</div>
        </template>
      </el-table-column>
      <el-table-column label="下单金额" prop="name" width="130">
        <template #default="scope">
          <div class="flex_column">
            <div class="text1">￥{{ scope.row.real_amount }}</div>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="利润/亏损" prop="name" width="110">
        <template #default="scope">
          <div class="text1">￥{{ scope.row.win_back }}</div>
        </template>
      </el-table-column>

    </el-table>
  </div>
</template>

<script setup>
const { orderStore, orderState } = inject('OrderStore')
import photo from '@/assets/order/photo.png'

const emits = defineEmits(['change'])
const runstatusMap = ref({
  0: '未进行',
  1: '预约中',
  2: '已完成',
  3: '已取消',
})

const bctypes = ref({
  hga: '皇冠体育',
  ps3838: '平博体育',
  kaiyun: '开云体育',
  isn: '智博体育',
  imsport: 'IM体育',
  manbet165: '万博体育',
  dxvip: '德信体育',
})

const expandedRowKeys = ref([])

const runstatusStyle = value => {
  let a = ''
  switch (value) {
    case 1:
      a = 'color: #feac2e;'
      break
    case 2:
      a = 'color: #1cc535;'
      break
    case 3:
      a = 'color: #ff5f58;'
      break

    default:
      break
  }
  return a
}

const comprehensiveOdd = row => {
  let a = '-'
  let num1 = 0
  let num2 = 0
  let num3 = 0
  row.order_list.forEach(item => {
    num1 += item.total_amount
    num2 += item.total_amount * item.place_odds_info
  })

  if (num1 != 0) {
    num3 = num2 / num1
    a = num3.toFixed(3)
  }
  return a
}

const getrowclassname = data => {
  let a = ''
  if (expandedRowKeys.value.includes(data.row.id)) {
    a = 'active_row'
  }
  return a
}
const handleExpand = row => {
  const rowIndex = expandedRowKeys.value.indexOf(row.id)
  if (rowIndex === -1) {
    expandedRowKeys.value.push(row.id)
  } else {
    expandedRowKeys.value.splice(rowIndex, 1)
  }
}
const OpenImgdialog = (data) => {
  emits('change', {
    type: 'openimg',
    data: data
  })
}

const isRowExpanded = row => expandedRowKeys.value.includes(row.id)
</script>

<style lang="scss" scoped>
.order_table {
  width: 100%;
  height: calc(100% - 48px);
  padding: 0 12px 12px 12px;
}

.text1 {
  //   font-family: DINAlternate;
  font-size: 14px;
  font-weight: bold;
  color: #000;
}

.text2 {
  font-family: AlibabaPuHuiTi_2_65_;
  font-size: 14px;
  color: #000;
}

.text3 {
  font-family: AlibabaPuHuiTi_2_85_;
  font-size: 14px;
  font-weight: bold;
  color: #000;
}

.text4 {
  font-family: AlibabaPuHuiTi_2_65_;
  font-size: 12px;
  color: #999;
}

.text5 {
  font-size: 14px;
  font-weight: bold;
  color: #1cc535;
}

.flex_column {
  display: flex;
  flex-direction: column;
}

.flex {
  display: flex;
  align-items: center;
}

.other_div {
  width: 32px;
  height: 20px;
  border: solid 1px #ff7900;
  background-color: #fff4ec;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: #ff7900;
}

.me_div {
  width: 32px;
  height: 20px;
  border: solid 1px #2bc7ac;
  background-color: #eefefb;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: #2bc7ac;
}

.expand_order_table {
  padding: 0 8px 8px 8px;
  // background-color: var(--pcvice-color);
}
</style>

<style>
.outer_order_table thead tr th.el-table__cell {
  height: 32px;
  line-height: 32px;
  padding: 6px 0;
  background-color: #f3f5fd;
  font-family: AlibabaPuHuiTi_2_85_;
}

.outer_order_table tbody tr td.el-table__cell {
  border-color: rgba(55, 17, 216, 0.08);
}

.outer_order_table .active_row .el-table__cell {
  border: none;
  background-color: #f8f9fe;
}

.outer_order_table .el-table__expanded-cell {
  background-color: #f8f9fe;
  padding: 8px;
  border-radius: 0 !important;
}

.outer_order_table thead tr th.el-table__cell .cell {
  font-family: AlibabaPuHuiTi_2_85_;
  font-size: 14px;
  font-weight: bold;
  color: #666;
}

/* .el-table .el-table__expand-icon {
  display: none;
} */

.outer_order_table .el-table__expand-icon {
  display: none !important;
}

.outer_order_table .el-table .cell {
  padding: 0 4px;
}

/* 使展开列不占据空间 */
.outer_order_table .el-table__expand-column {
  width: 0 !important;
  min-width: 0 !important;
  padding: 0;
  margin: 0;
  overflow: hidden;
  position: relative;
}

.outer_order_table .el-table__expand-column .cell {
  width: 0 !important;
  min-width: 0 !important;
  padding: 0;
  margin: 0;
  overflow: hidden;
}

.expand_order_table thead tr th.el-table__cell {
  background-color: #eceffa;
}

.expand_order_table tbody tr td.el-table__cell {
  border: none;
}

.outer_order_table .el-table__inner-wrapper::before,
.expand_order_table .el-table__inner-wrapper::before {
  height: 0;
}
</style>